<template>
	<div>
		<el-popover width="800" trigger="click" title="机台明细">
			<jk-table border :stripe="false" :show-header="true" :data="processItem.productOrderMachineList" :height="300">
				<vxe-column title="机台" align="left" field="machineCode" :width="90">
					<template slot-scope="scope">
						<div class="flex-start-center">
							<jk-state-bar :state="scope.row.openingState" :state-list="openStateList" :show-text="false" class=""></jk-state-bar>
							<span>{{ scope.row.machineCode }}</span>
						</div>
					</template>
				</vxe-column>
				<!--<vxe-column title="产量(M)" align="right" field="accumulateOutput" :width="100"></vxe-column>-->
				<vxe-column title="实时产量(kg)" align="right" field="accumulateShiftQty" :width="100"></vxe-column>
				<vxe-column title="称重产量(kg)" align="right" field="accumulateWeighNetWeight" :width="100"></vxe-column>
				<vxe-column title="能耗(kw·h)" align="right" field="accumulateEnergy" :width="90"></vxe-column>
				<vxe-column title="工时" align="right" field="workHours" :width="70"></vxe-column>
				<vxe-column title="开台时间" align="center" field="startTime" :min-width="90">
					<template slot-scope="scope">
						<div class="flex-center" style="flex-direction: column;">
							<span style="line-height: 13px;">{{ scope.row.startTime ? scope.row.startTime.split(' ')[0] : '' }}</span>
							<span style="line-height: 13px;">{{ scope.row.startTime ? scope.row.startTime.split(' ')[1] : '' }}</span>
						</div>
					</template>
				</vxe-column>
				<vxe-column title="了机时间" align="center" field="endTime" :min-width="90">
					<template slot-scope="scope">
						<div class="flex-center" style="flex-direction: column;">
							<span style="line-height: 13px;">{{ scope.row.endTime ? scope.row.endTime.split(' ')[0] : '' }}</span>
							<span style="line-height: 13px;">{{ scope.row.endTime ? scope.row.endTime.split(' ')[1] : '' }}</span>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<div slot="reference" style="width: calc(100%);padding: 2px;">
				<el-tag type="primary" style="font-size: 14px;font-weight: 500;" class="width-100-percent">{{ processItem.processName }}</el-tag>
			</div>
		</el-popover>
	</div>
</template>
<script>
    import { openStateList } from '../../../../utils/jk/status-option-list';

    export default {
        props: {
            processItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            machineItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                openStateList: openStateList
            };
        }
    };
</script>
